<script>
import global from "@/views/global/global";
import axios from "axios";
export default {
  name: "Management",
  data() {
    return {
      global: global,
      updateIds:[],
      pageDto: {
        pageNum: 1,
        pageSize: 5,
        data: global.user.id
      },
      total: 0,
      pages: 0,
      roomList:[]
    }
  },
  methods: {
    getList() {
      axios.post("/oa/room/getRoomByUserId",this.pageDto).then((res) => {
        this.pageDto.pageNum = res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total = res.data.data.total;
        this.pages = res.data.data.pages;
        this.roomList = res.data.data.list;
      })
    },
    handleSelectionChange(val){
      this.updateIds = val
      this.updateIds = val.map(item=>item.bookingId)
    },
    cancel(){
      this.$confirm('确定取消吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      axios.post(`/oa/room/cancelBooking`,this.updateIds)
          .then(() => {
            this.$message({
              type: 'success',
              message: '取消成功!'
            });
            this.getList();
          })
    }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      )
    }
  },
  created() {
    this.getList();
  },

}
</script>

<template>
  <div class="titleBox">
    会议室预定管理(普通用户)
  </div>
  <el-table :data="this.roomList" style="width: 100%"  @selection-change="handleSelectionChange">
    <el-table-column  type="selection" width="50"></el-table-column>
    <el-table-column label="会议室名称">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.roomName}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会议室开始时间">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.bookingTime}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会议室结束时间">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.reservationEnd }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会议室用途">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.reason }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="预定人">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ this.global.user.realName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="预定时间">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.createdAt }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页-->
  <el-pagination
      v-model:current-page="this.pageDto.pageNum"
      :page-size="this.pageDto.pageSize"
      :pager-count="this.pages"
      layout="prev, pager, next"
      :total="this.total"
      @current-change="getList"
  />
  <el-button type="primary" @click="cancel()"> 取消预定</el-button>
</template>

<style scoped lang="less">

</style>
